const staff_layout = {
    template:`
<div>
        <nav class="navbar navbar-dark fixed-top bg-primary flex-md-nowrap p-0 shadow">
            <a href="index.html" class="navbar-brand col-sm-3 col-md-2 mr-0 py-2">Staff Panel</a>
            <span class="mx-2 w-100 text-white">{{datetime}}</span>
            <ul class="navbar-nav px-3 flex-row align-items-center">
                <li class="nav-item text-nowrap text-white">
                    <span>{{auth_info.email}}</span>
                </li>
                <li class="nav-item text-nowrap">
                    <a class="nav-link cursor-pointer" @click="logout">Logout</a>
                </li>
            </ul>
        </nav>
        <div class="container-fluid">
            <div class="row">
                <nav class="col-md-2 d-md-block bg-light sideber">
                    <div class="sideber-sticky mt-4">
                        <ul class="nav flex-column px-3">
                            <li class="nav-item text-primary"><router-link :to="{name:'staff.index'}">Dashboard</router-link></li>
                            <li class="nav-item text-primary"><router-link :to="{name:'staff.index'}" href="index.html">My Event</router-link></li>
                        </ul>
                        <template v-if="auth_info.is_admin">
                            <h6 class="sideber-heading d-flex justify-content-between align-content-center px-3 mt-4 text-muted text-uppercase" >Event Management</h6>
                            <ul class="nav flex-column px-3">
                                <li class="nav-item text-primary"><router-link :to="{name:'staff.event.index'}">Event List</router-link></li>
                                <li class="nav-item text-primary"><router-link :to="{name:'staff.event.create'}" >Event Create</router-link></li>
                            </ul>
                        </template>

                        <template v-if="auth_info.is_admin">
                            <h6 class="sideber-heading d-flex justify-content-between align-content-center px-3 mt-4 text-muted text-uppercase">Employee Management</h6>
                            <ul class="nav flex-column px-3">
                                <li class="nav-item text-primary"><router-link :to="{name:'staff.employee.index'}">Employee List</router-link></li>
                                <li class="nav-item text-primary"><router-link :to="{name:'staff.employee.create'}">Employee Create</router-link></li>
                            </ul>
                        </template>
                        
                        <template v-if="auth_info.is_admin">
                            <h6 class="sideber-heading d-flex justify-content-between align-content-center px-3 mt-4 text-muted text-uppercase">Client Management</h6>
                            <ul class="nav flex-column px-3">
                                <li class="nav-item text-primary"><router-link :to="{name:'staff.client.index'}">Client List</router-link></li>
                                <li class="nav-item text-primary"><router-link :to="{name:'staff.client.create'}">Client Create</router-link></li>
                            </ul>
                        </template>    
                    </div>
                </nav>
                <main class="col-md-9 ml-sm-auto col-lg-10 px-4 container-main">
                    <router-view></router-view>
                </main>
            </div>
        </div>
    </div>    
    `,
    data() {
        return {
            timer:null,
            datetime:null,
            auth_info: store.auth.info
        };
    },
    methods:{
        get_datetime(){
            this.timer = setInterval(()=>{
                ajax.get('datetime').then(res=>{
                    if (res.status === 200){
                        this.datetime = res.data.data.datetime;
                    }
                })
            },1000)
        },
        logout(){
            ajax.post('logout').then(res=>{
                if (res.status === 200){
                    store.remove_auth();
                    this.$router.push({name:'staff.login'});
                }
            })
        }
    },
    mounted(){
        this.get_datetime();
    },
    destroyed(){
        clearInterval(this.timer);
    }
};